<template>
  <div class="upload-select-box">
    <!-- 单个 -->
    <template v-if="count == 1">
      <div class="upload-select-btn" :style="styles" @click="clickUpload">
        <template v-if="selectData == ''">
          <i class="icon icon-jia"></i>
        </template>
        <template v-else>
          <el-image :style="styles" :src="selectData" fit="contain" />
          <div class="upload-select-del" @click.stop="del(-1)">
            <div class="icon icon-cuo"></div>
          </div>
        </template>
      </div>
    </template>
    <!-- 多个 -->
    <template v-else>
      <!-- 已选图片 -->
      <template v-for="(item, index) in selectData" :key="index">
        <div
          class="upload-select-btn"
          :style="styles"
          draggable="true"
          @dragstart="dragstart(item)"
          @dragenter="dragenter(item, $event)"
          @dragend="dragend(item, $event)"
          @dragover="dragover($event)"
        >
          <el-image :style="styles" :src="item" fit="contain" />
          <div class="upload-select-del" @click.stop="del(index, item)">
            <div class="icon icon-cuo"></div>
          </div>
        </div>
      </template>
      <div class="upload-select-btn" :style="styles" @click="clickUpload">
        <i class="icon icon-jia"></i>
      </div>
    </template>
    <mateSelectModal
      ref="mateSelectModalRef"
      @change="selectChange"
      :count="count"
    ></mateSelectModal>
  </div>
</template>
<script lang="ts">
export default {
  name: "upload-btn",
};
</script>
<script setup lang="ts">
import {
  ref,
  computed,
  watch,
  getCurrentInstance,
  onMounted,
  nextTick,
} from "vue";

import mateSelectModal from "@/components/mate/select-modal/index.vue";

const { proxy } = getCurrentInstance() as any;

const props = withDefaults(
  defineProps<{
    width?: string;
    height?: string;
    modelValue?: string | number | string[] | number[] | any;
    count?: number | string;
    padding?:string;
  }>(),
  {
    width: "",
    height: "80px",
    modelValue: "",
    count: 1,
    padding:'5px'
  }
);
const emit = defineEmits(["change", "update:modelValue"]);

const mateSelectModalRef = ref<HTMLElement>();

const selectData: string | number | string[] | number[] | any = ref(
  props.count == 1 ? props.modelValue.toString() : props.modelValue
);
const styles = computed(() => {
  return {
    height: props.height,
    width: props.width ? props.width : props.height,
    padding:props.padding,
    marginRight: props.count == 1?'':'5px',
    marginBottom: props.count == 1?'':'5px',
  };
});

const clickUpload = () => {
  proxy?.$refs["mateSelectModalRef"]?.open(selectData.value);
};

const selectChange = (data: any) => {
  selectData.value = data;
  emit("update:modelValue", data);
  emit("change", data);
};

const del = (index: number, url: string = "") => {
  if (index == -1) {
    selectData.value = "";
  } else {
    selectData.value.splice(index, 1);
  }
  emit("update:modelValue", selectData.value);
  emit("change", selectData.value);
};

watch(
  () => props.modelValue,
  () => {
    selectData.value = props.modelValue;
    emit("update:modelValue", selectData.value);
    emit("change", selectData.value);
  }
);

const dragoverOldItem = ref<any>();

const dragoverNewItem = ref<any>();

const dragstart = (value: any) => {
  dragoverOldItem.value = value;
};

// 停止拖拽时触发
const dragend = (value: any, e: any) => {
  // 如果位置没有发生改变 什么也不做
  if (dragoverOldItem.value !== dragoverNewItem.value) {
    let oldIndex = selectData.value.indexOf(dragoverOldItem.value);
    let newIndex = selectData.value.indexOf(dragoverNewItem.value);

    let newItems = [...selectData.value];
    newItems.splice(oldIndex, 1);
    newItems.splice(newIndex, 0, dragoverOldItem.value);
    selectData.value = [...newItems];
    // 如果位置发生了改变
  }
};

// 记录移动过程中信息
const dragenter = (value: any, e: any) => {
  dragoverNewItem.value = value;
  e.preventDefault();
};

// 拖动事件（主要是为了拖动时鼠标光标不变为禁止）
const dragover = (e: any) => {
  e.preventDefault();
};
</script>
<style scoped>
.upload-select-box {
  display: flex;
  flex-wrap: wrap;
}
.upload-select-btn {
  border: 1px dashed var(--el-color-info-light-7);
  border-radius: var(--base-radius);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--el-color-info-light-7);
  cursor: pointer;
  position: relative;
}
.upload-select-del {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #fff;
  width: 12px;
  height: 12px;
  line-height: 13px;
  cursor: pointer;
  border-radius: 12px;
  border: 1px solid var(--el-color-info-light-7);
}
.upload-select-del:hover {
  border-color: var(--base-default);
  color: var(--base-default);
}
.upload-select-del .icon {
  font-size: 12px;
  font-weight: bold;
}
</style>